<template>
    <div class="mr-root">
      <pheader></pheader>
         <el-carousel :interval="1500" height="200px">
            <el-carousel-item v-for="i in is">
                <div class="title">{{i.title}}</div>
                <img :src=i.images id="im" alt="">

            </el-carousel-item>
        </el-carousel>
      <div v-for="t in shu">
                <div class="fu">
                    <router-link :to="'/news/Informationdetails/'+t.id+'/'+t.title">
                    <div class="imgs">
                        <img :src=t.images alt="">
                    </div>
                    </router-link>
                    <div class="content2">
                        <p>{{t.title}}</p>
                        <p>{{t.createTime}}</p>

                        <p>标签:{{t.label}}</p>
                    </div>
                    
                </div>
            </div>
      <div class="jiazai" @click="loadmore">点击加载更多</div>
      <div class="kong"></div>
      <loading v-if="isload"></loading>
      <pfooter></pfooter>
      <back-top></back-top>
    </div>
</template>
<script>
    import Pheader from '../components/Header'
    import Pfooter from '../components/Footer'
     import BackTop from '../components/BackTop'
     import Loading from '../components/Loding'
    export default{
         data(){
         return {
          showload: true,
          shu:[],
          more:1,
          isload:true,
          is:[]
         }  
       },
        components:{
           Pheader,Pfooter,BackTop,Loading
        },
        created(){
             this.duo(this.more)
             this.axios.get(`https://api.maimengjun.com/index.php?r=adImage/list&customPosition=1`)
             .then(data=>{
                this.is=data.data.results
                console.log(this.is)
             })
             .catch(err=>{
                 console.log(err)
             })
        },
        methods:{
             duo(page){
this.axios.get('https://api.maimengjun.com/index.php?r=message/list&page='+page+'&size=15')
              .then(data=>{
                  this.shu=this.shu.concat(data.data.results)
                  this.isload=false
                //    console.log(this.shu)
              })
              .catch(err=>{
                  console.log(err)
              })
             },
             loadmore(){
                  this.more++
                  
                this.duo(this.more)
             }
            
        }
        
    }
</script>
<style scoped>
   .mr-root{
       margin-top: 2.1rem;
   }
   .jiazai{
      line-height: 0.7rem;
       width: 2rem;
       background: pink;
       color: white;
       text-align: center;
       margin:0.3rem auto;
       border-radius: 7px;
   }
   .kong{
       height: 51px;
       width: 100%;
   }
   .el-carousel{
       position: relative;
       top:-0.5rem;
   }
    .title {
        color: white;
        position: relative;
        top: 170px;
    }
 img#im {
        width: 100%;
        height: 200px;
    }
   
    .fu {
        display: flex;
    }
    .fu .content2 {
        margin-left: 0.3rem;
    }
    
    .fu .content2>p:nth-child(1) {
         font-weight: bolder;
        font-size: 0.4rem;
        -webkit-line-clamp:2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: hidden;
        width:5.5rem;
    }
    
    .fu .content2>p:nth-child(2),
    p:nth-child(3) {
        color: gray;
        font-size: 0.3rem;
    }
     .imgs img {
        width: 3.9rem;
        height: 2.5rem;
        margin-bottom: 0.1rem;
        margin-left: 0.3rem;
    }
</style>
